<script setup>
import { useRouter } from 'vue-router';
import { onMounted, onUnmounted, ref } from 'vue';
import Footer from "@/components/footer.vue";
import axios from 'axios';

const router = useRouter();

// 定义滚动状态，0 为 static，1 为 fixed
const scrollState = ref(0);

// 获取 DOM 元素的引用
const fixedBox = ref(null);

// 处理滚动事件的函数
const handleScroll = () => {
  // 获取滚动条的位置
  const s1 = document.documentElement.scrollTop;
  const s2 = document.body.scrollTop;
  const scroll = s1 === 0 ? s2 : s1;

  // 获取视口宽度
  const width = document.documentElement.clientWidth;

  // 当滚动条超过视口宽度的 12% 时，设置为固定定位
  if (scroll > width * 0.12) {
    scrollState.value = 1; // 滚动超过阈值，设置为 fixed
  } else {
    scrollState.value = 0; // 否则恢复为 static
  }
};
// 在组件挂载时添加滚动事件监听
onMounted(() => {
  window.addEventListener('scroll', handleScroll);
});

// 在组件卸载时移除滚动事件监听
onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll);
});

const goToBusiness = (orderTypeId) => {
  // 使用编程式导航，跳转到 /businessList 页面，并传递 orderTypeId 参数
  router.push({ path: '/business', query: { orderTypeId } })
};

// 定义一个响应式变量来存储业务数据
const businesses = ref([]);

// 定义一个函数来获取数据
const fetchBusinessData = async () => {
  try {
    const response = await axios.get('http://localhost/business/BusinessController/getAllBusiness');  // 请求后端数据
    businesses.value = response.data;  // 将返回的数据存储到 businesses
  } catch (error) {
    console.error('获取数据失败:', error);  // 处理错误
    // 你可以在这里设置一个状态变量，向用户显示错误信息
    alert('获取业务数据失败，请稍后再试');
  }
};

// 组件挂载时调用获取数据的方法
onMounted(() => {
  fetchBusinessData();
});
</script>

<template>
  <div class="wrapper">
    <!--header-->
    <header>
      <div>
        <div class="iconfont icon-dingwei icon-dingwei-box"></div>
      </div>
      <div class="dingwei_text">昆明市呈贡区<i class="iconfont icon-daosanjiao icon-daosanjiao-box"></i></div>
    </header>
    <!--search-->
    <div class="search">
      <div class="search-top"  ref="fixedBox" :class="scrollState ? 'fixed' : 'static'">
        <div class="search-box">
          <i class="iconfont icon-sousuo icon-sousuo-box"></i>搜索饿了么商家、商品名称
        </div>
      </div>
    </div>
    <!--点餐分类-->
    <ul class="foodtype">
      <li @click="goToBusiness(1)">
        <img src="../assets/img/dcfl01.png">
        <p>美食</p>
      </li>
      <li @click="goToBusiness(2)">
        <img src="../assets/img/dcfl02.png">
        <p>早餐</p>
      </li>
      <li @click="goToBusiness(3)">
        <img src="../assets/img/dcfl03.png">
        <p>跑腿代购</p>
      </li>
      <li @click="goToBusiness(4)">
        <img src="../assets/img/dcfl04.png">
        <p>汉堡披萨</p>
      </li>
      <li @click="goToBusiness(5)">
        <img src="../assets/img/dcfl05.png">
        <p>甜品饮品</p>
      </li>
      <li @click="goToBusiness(6)">
        <img src="../assets/img/dcfl06.png">
        <p>速食简餐</p>
      </li>
      <li @click="goToBusiness(7)">
        <img src="../assets/img/dcfl07.png">
        <p>地方小吃</p>
      </li>
      <li @click="goToBusiness(8)">
        <img src="../assets/img/dcfl08.png">
        <p>米粉面馆</p>
      </li>
      <li @click="goToBusiness(9)">
        <img src="../assets/img/dcfl09.png">
        <p>包子粥铺</p>
      </li>
      <li @click="goToBusiness(10)">
        <img src="../assets/img/dcfl10.png">
        <p>炸鸡炸串</p>
      </li>
    </ul>
    <!--横幅广告-->
    <div class="banner" >
      <h3>品质套餐</h3>
      <P>搭配齐全吃得好</P>
      <a>立即抢购 ></a>
    </div>
    <!--超级会员-->
    <div class="VIP">
      <div class="left">
        <img src="../assets/img/super_member.png">
        <h3>超级会员</h3>
        <p>&#8226; 每月享超值福利</p>
      </div>
      <div class="right">
        立即开通 >
      </div>
    </div>
    <!--推荐商家-->
    <div class="recommend">
      <div class="line"></div>
      <p>推荐商家</p>
      <div class="line"></div>
    </div>
    <!--推荐方式-->
    <ul class="recommend_type">
      <li>综合排序<i class="iconfont icon-daosanjiao"></i></li>
      <li>距离最近</li>
      <li>销量最高</li>
      <li>筛选<i class="iconfont icon-shaixuan"></i></li>
    </ul>

  <!--推荐商家列表-->
    <ul class="business" v-if="businesses.length > 0">
      <li v-for="business in businesses" :key="business.businessId">
        <img :src="business.businessImg" alt="Business Image">>
        <div class="information">
          <div class="info_h">
            <h3>{{ business.businessName }}</h3>
            <div class="info_like">&#8226;</div>
          </div>
          <div class="info_star">
            <div class="info_star_left">
              <i class="iconfont icon-xingxing xingxing"></i>
              <i class="iconfont icon-xingxing xingxing"></i>
              <i class="iconfont icon-xingxing xingxing"></i>
              <i class="iconfont icon-xingxing xingxing"></i>
              <i class="iconfont icon-xingxing xingxing"></i>
              <P>4.9月售345单</P>
            </div>
            <div class="info_star_right">
              蜂鸟专送
            </div>
          </div>
          <div class="info_delivery">
            <p>{{ business.starPrice}}起送 | {{ business.deliveryPrice }}配送</p>
            <p>3.22公里 | 30分钟</p>
          </div>
          <div class="info_explain">
            <div>{{ business.businessExplain }}</div>
          </div>
          <div class="info_promotion">
            <div class="info_promotion_left">
              <div class="xin">新</div>
              <p>饿了么新用户首单立减9元</p>
            </div>
            <div class="info_promotion_right">
              <p>2个活动</p>
              <i class="iconfont icon-daosanjiao"></i>
            </div>
          </div>
          <div class="info_promotion">
            <div class="info_promotion_left">
              <div class="xin" style="background-color: #f1884f">特</div>
              <p>特价商品5元起</p>
            </div>
          </div>
        </div>
      </li>
<!--      <li>-->
<!--        <img src="../assets/img/sj02.png">-->
<!--        <div class="information">-->
<!--          <div class="info_h">-->
<!--            <h3>小锅饭豆腐馆（全运店）</h3>-->
<!--            <div class="info_like">&#8226;</div>-->
<!--          </div>-->
<!--          <div class="info_star">-->
<!--            <div class="info_star_left">-->
<!--              <i class="iconfont icon-xingxing xingxing"></i>-->
<!--              <i class="iconfont icon-xingxing xingxing"></i>-->
<!--              <i class="iconfont icon-xingxing xingxing"></i>-->
<!--              <i class="iconfont icon-xingxing xingxing"></i>-->
<!--              <i class="iconfont icon-xingxing xingxing"></i>-->
<!--              <P>4.9月售345单</P>-->
<!--            </div>-->
<!--            <div class="info_star_right">-->
<!--              蜂鸟专送-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="info_delivery">-->
<!--            <p>￥15起送 | ￥3配送</p>-->
<!--            <p>3.22公里 | 30分钟</p>-->
<!--          </div>-->
<!--          <div class="info_explain">-->
<!--            <div>各种饺子</div>-->
<!--          </div>-->
<!--          <div class="info_promotion">-->
<!--            <div class="info_promotion_left">-->
<!--              <div class="xin">新</div>-->
<!--              <p>饿了么新用户首单立减9元</p>-->
<!--            </div>-->
<!--            <div class="info_promotion_right">-->
<!--              <p>2个活动</p>-->
<!--              <i class="iconfont icon-daosanjiao"></i>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="info_promotion">-->
<!--            <div class="info_promotion_left">-->
<!--              <div class="xin" style="background-color: #f1884f">特</div>-->
<!--              <p>特价商品5元起</p>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </li>-->
<!--      <li>-->
<!--        <img src="../assets/img/sj03.png">-->
<!--        <div class="information">-->
<!--          <div class="info_h">-->
<!--            <h3>麦当劳麦乐送（全运路店）</h3>-->
<!--            <div class="info_like">&#8226;</div>-->
<!--          </div>-->
<!--          <div class="info_star">-->
<!--            <div class="info_star_left">-->
<!--              <i class="iconfont icon-xingxing xingxing"></i>-->
<!--              <i class="iconfont icon-xingxing xingxing"></i>-->
<!--              <i class="iconfont icon-xingxing xingxing"></i>-->
<!--              <i class="iconfont icon-xingxing xingxing"></i>-->
<!--              <i class="iconfont icon-xingxing xingxing"></i>-->
<!--              <P>4.9月售345单</P>-->
<!--            </div>-->
<!--            <div class="info_star_right">-->
<!--              蜂鸟专送-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="info_delivery">-->
<!--            <p>￥15起送 | ￥3配送</p>-->
<!--            <p>3.22公里 | 30分钟</p>-->
<!--          </div>-->
<!--          <div class="info_explain">-->
<!--            <div>各种饺子</div>-->
<!--          </div>-->
<!--          <div class="info_promotion">-->
<!--            <div class="info_promotion_left">-->
<!--              <div class="xin">新</div>-->
<!--              <p>饿了么新用户首单立减9元</p>-->
<!--            </div>-->
<!--            <div class="info_promotion_right">-->
<!--              <p>2个活动</p>-->
<!--              <i class="iconfont icon-daosanjiao"></i>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="info_promotion">-->
<!--            <div class="info_promotion_left">-->
<!--              <div class="xin" style="background-color: #f1884f">特</div>-->
<!--              <p>特价商品5元起</p>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </li>-->
<!--      <li>-->
<!--        <img src="../assets/img/sj04.png">-->
<!--        <div class="information">-->
<!--          <div class="info_h">-->
<!--            <h3>米村拌饭（浑南店）</h3>-->
<!--            <div class="info_like">&#8226;</div>-->
<!--          </div>-->
<!--          <div class="info_star">-->
<!--            <div class="info_star_left">-->
<!--              <i class="iconfont icon-xingxing xingxing"></i>-->
<!--              <i class="iconfont icon-xingxing xingxing"></i>-->
<!--              <i class="iconfont icon-xingxing xingxing"></i>-->
<!--              <i class="iconfont icon-xingxing xingxing"></i>-->
<!--              <i class="iconfont icon-xingxing xingxing"></i>-->
<!--              <P>4.9月售345单</P>-->
<!--            </div>-->
<!--            <div class="info_star_right">-->
<!--              蜂鸟专送-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="info_delivery">-->
<!--            <p>￥15起送 | ￥3配送</p>-->
<!--            <p>3.22公里 | 30分钟</p>-->
<!--          </div>-->
<!--          <div class="info_explain">-->
<!--            <div>各种饺子</div>-->
<!--          </div>-->
<!--          <div class="info_promotion">-->
<!--            <div class="info_promotion_left">-->
<!--              <div class="xin">新</div>-->
<!--              <p>饿了么新用户首单立减9元</p>-->
<!--            </div>-->
<!--            <div class="info_promotion_right">-->
<!--              <p>2个活动</p>-->
<!--              <i class="iconfont icon-daosanjiao"></i>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="info_promotion">-->
<!--            <div class="info_promotion_left">-->
<!--              <div class="xin" style="background-color: #f1884f">特</div>-->
<!--              <p>特价商品5元起</p>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </li>-->
<!--      <li>-->
<!--        <img src="../assets/img/sj05.png">-->
<!--        <div class="information">-->
<!--          <div class="info_h">-->
<!--            <h3>申记串道（中海康饭店）</h3>-->
<!--            <div class="info_like">&#8226;</div>-->
<!--          </div>-->
<!--          <div class="info_star">-->
<!--            <div class="info_star_left">-->
<!--              <i class="iconfont icon-xingxing xingxing"></i>-->
<!--              <i class="iconfont icon-xingxing xingxing"></i>-->
<!--              <i class="iconfont icon-xingxing xingxing"></i>-->
<!--              <i class="iconfont icon-xingxing xingxing"></i>-->
<!--              <i class="iconfont icon-xingxing xingxing"></i>-->
<!--              <P>4.9月售345单</P>-->
<!--            </div>-->
<!--            <div class="info_star_right">-->
<!--              蜂鸟专送-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="info_delivery">-->
<!--            <p>￥15起送 | ￥3配送</p>-->
<!--            <p>3.22公里 | 30分钟</p>-->
<!--          </div>-->
<!--          <div class="info_explain">-->
<!--            <div>各种饺子</div>-->
<!--          </div>-->
<!--          <div class="info_promotion">-->
<!--            <div class="info_promotion_left">-->
<!--              <div class="xin">新</div>-->
<!--              <p>饿了么新用户首单立减9元</p>-->
<!--            </div>-->
<!--            <div class="info_promotion_right">-->
<!--              <p>2个活动</p>-->
<!--              <i class="iconfont icon-daosanjiao"></i>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="info_promotion">-->
<!--            <div class="info_promotion_left">-->
<!--              <div class="xin" style="background-color: #f1884f">特</div>-->
<!--              <p>特价商品5元起</p>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </li>-->
    </ul>
    <Footer></Footer>
  </div>

</template>

<style scoped lang="less">
@import url('../assets/font/font_daosanjiao/iconfont.css');
@import url('../assets/font/font_dingwei/iconfont.css');
@import url('../assets/font/font_sousuo/iconfont.css');
@import url('../assets/font/font_shaixuan/iconfont.css');
@import url('../assets/font/font_xingxing/iconfont.css');


/**********总容器**********/
.wrapper{
  width: 100%;
  height: 100%;
}
.wrapper header{
  width: 100%;
  height:12vw;
  background-color: #0097ff;
  display: flex;
  align-items: center;
}
.wrapper header .icon-dingwei-box{
  width: 3.5vw;
  height: 3.5vw;
  margin: 0 1vw 0 3vw;
  color:#fff;
  /*上，右，下，左*/
}
.wrapper header .dingwei_text{
  font-size: 4.5vw;
  font-weight: 700;
  color:#fff;
}
.wrapper header .dingwei_text .icon-daosanjiao-box{
  margin-left: 1vw;
}

/*********搜索*************/
.wrapper .search{
  width:100%;
  height: 13vw;
}

.wrapper .search .search-top{
  width:100%;
  height: 13vw;
  background-color: #0097ff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wrapper .search .search-top.fixed{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
}
.wrapper .search .search-top.static{
  position: static;
}
.wrapper .search .search-top .search-box{
  width: 90%;
  height: 9vw;
  background-color:#fff;
  border-radius: 5px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 3.5vw;
  color: #aeaeae;
  font-family: "宋体";
  /*此样式是让文本选中状态无效*/
  user-select: none;
}
.icon-sousuo-box{
  margin-right: 1vw;
}

/*********点餐*************/
.wrapper .foodtype{
  width: 100%;
  height: 48vw;
  display: flex;
  /*自动换行*/
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: center;
}
.wrapper .foodtype li{
  width: 18vw;
  height: 20vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  user-select: none;
  cursor: pointer;
}
.wrapper .foodtype li img{
  width: 12vw;
  height: 12vw;
}
.wrapper .foodtype li p{
  font-size:3.2vw;
  color: #666;
}

/*********广告*************/
.wrapper .banner{
  width: 95vw;
  margin: 0 auto;
  height: 29vw;

  background-image: url('../assets/img/index_banner.png');
  /*不平铺*/
  background-repeat: no-repeat;
  /*成比例撑满整个窗口*/
  background-size: cover;

  /*设置内边距，希望使用边框盒子，不会改变总体的大小*/
  box-sizing: border-box;
  padding: 2vw 6vw;
  /*上下，左右*/
}
.wrapper .banner h3{
  font-size: 4.2vw;
  margin-bottom: 1.2vw;
}
.wrapper .banner p{
  font-size: 3.4vw;
  color: #666;
  margin-bottom: 2.4vw;
}
.wrapper .banner a{
  font-size: 3vw;
  color: #C79060;
  font-weight: 700;
}

/*********VIP*************/
.wrapper .VIP{
  width: 95%;
  margin: 0 auto;
  height: 11.5vw;
  background-color: #feedc1;
  margin-top: 1.3vw;
  border-radius: 4px;
  color: #644f1b;

  display: flex;
  justify-content: space-between;
  /*它们之间的空间会平均分配，同时第一个项目位于容器的起始位置，最后一个项目位于容器的结束位置。*/
  align-items: center;
}
.wrapper .VIP .left{
  display: flex;
  align-items: center;
  margin-left: 4vw;
  user-select: none;
}
.wrapper .VIP .left img{
  width: 6vw;
  height: 6vw;
  margin-right: 2vw;
}
.wrapper .VIP .left h3{
  font-size: 4vw;
  margin-right: 2vw;
}
.wrapper .VIP .left p{
  font-size: 3vw;
}
.wrapper .VIP .right{
  font-size: 3vw;
  margin-right: 4vw;
  cursor: pointer;
}
/*********推荐商家**********/
.wrapper .recommend{
  width: 100%;
  height: 14vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wrapper .recommend .line{
  width: 6vw;
  height: 0.2vw;
  background-color: #888;
}
.wrapper .recommend p{
  font-size: 4vw;
  margin: 0 4vw;
}
/*********推荐方式**********/
.wrapper .recommend_type{
  width: 100%;
  height: 5vw;
  margin-bottom: 5vw;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.wrapper .recommend_type li{
  font-size: 3.5vw;
  color: #555;
}
/*********推荐商家列表**********/
.wrapper .business{
  width: 100%;
  margin-bottom: 14vw;
}
.wrapper .business li{
  width: 100%;
  border-bottom: solid 1px #ddd;
  box-sizing: border-box;
  padding: 2.5vw;
  user-select: none;
  display: flex;
}
.wrapper .business li img{
  width: 18vw;
  height: 18vw;
}
.wrapper .business li .information{
  width: 100%;
  box-sizing: border-box;
  padding-left: 3vw;
}
.wrapper .business li .information .info_h{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2vw;
}
.wrapper .business li .information .info_h h3{
  font-size: 4vw;
  color: #333;
}
.wrapper .business li .information .info_h .info_like{
  width: 1.6vw;
  height: 3.4vw;
  background-color: #666;
  color: #fff;
  font-size: 4vw;
  margin-right: 4vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
.wrapper .business li .information .info_star{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2vw;
  font-size: 3.1vw;
}
.wrapper .business li .information .info_star .info_star_left{
  display: flex;
  align-items: center;
}
.xingxing{
  color: #fec80e;
  margin-right: 0.5vw;
}
.wrapper .business li .information .info_star .info_star_left p{
  color: #666;
  margin-left: 1vw;
}
.wrapper .business li .information .info_star .info_star_right{
  background-color: #0097ff;
  color: #fff;
  font-size: 2.4vw;
  border-radius: 2px;
  padding: 0.6vw;
}
.wrapper .business li .information .info_delivery{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2vw;
  color: #666;
  font-size: 3.1vw;
}
.wrapper .business li .information .info_explain{
  display: flex;
  align-items: center;
  margin-bottom: 3vw;

}
.wrapper .business li .information .info_explain div{
  border: solid 1px #ddd;
  font-size: 2.8vw;
  color: #666;
  border-radius: 1px;
}
.wrapper .business li .information .info_promotion{
  display: flex;
  justify-content: space-between;
  margin-bottom: 1.8vw;

}
.wrapper .business li .information .info_promotion .info_promotion_left{
  display: flex;
  align-items: center;
}
.wrapper .business li .information .info_promotion .info_promotion_left .xin{
  width: 4vw;
  height: 4vw;
  background-color: #70bc46;border-radius: 3px;
  font-size: 3vw;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wrapper .business li .information .info_promotion .info_promotion_left p{
  color: #666666;
  font-size: 3vw;
  margin-left: 2vw;
}

.wrapper .business li .information .info_promotion .info_promotion_right{
  display: flex;
  align-items: center;
  font-size: 2.5vw;
  color: #999;

}
.wrapper .business li .information .info_promotion .info_promotion_right p{
  margin-right: 2vw;
}

/*********底部菜单栏**********/
.wrapper .footer{
  width: 100%;
  height: 14vw;
  border-top: solid 1px #ddd;
  background-color: #fff;

  position: fixed;
  left: 0;
  bottom: 0;

  display: flex;
  justify-content: space-around;
  align-items: center;
}
.wrapper .footer li{
  display: flex;
  flex-direction: column;
  justify-items: center;
  align-items: center;

  color: #999;
  user-select: none;
  cursor:pointer;
}

.wrapper .footer li p{
  font-size: 3vw;
}

</style>